//
// Grid system
// --------------------------------------------------
@import "mixins.less";
@import "variables.less";

// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.

.container {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

	.container:before,
	.container:after {
		display: table;
		content: " ";
	}

	.container:after {
		clear: both;
	}

.layout {
	padding-left: 0;
	position: relative;
}

	.layout:before,
	.layout:after {
		display: table;
		content: " ";
	}

	.layout:after {
		clear: both;
	}

@media (max-width: 767px){
	.container {
		width: 98%;
	}

	.layout{
		margin-left: 44px;
	}
}

@media (min-width: 768px) {
	.container {
		width: 750px;
	}
	
	.layout .container{
		max-width:100%;
		min-width:95%;
	}

	.layout{
		margin-left: 140px;
	}
}

@media (min-width: 992px) {
	.container {
		width: 970px;
	}
	
	.layout .container{
		max-width:100%;
		min-width:95%;
	}

	.layout{
		margin-left: 180px;
	}
}

@media (min-width: 1200px) {
	.container {
		width: 1170px;
	}
	
	.layout .container{
		max-width:100%;
		min-width:95%;
	}

	.layout{
		margin-left: 220px;
	}
}

.split-form-vertical .form-control{
	height: 523px;
	overflow-y: scroll;
}

.split-form-horizen .form-control{
	height: 143px;
	overflow-y:scroll;
}

.split-form-vertical .highlight,
.split-form-vertical .full-height{
	height: 580px;
}

.split-form-horizen .highlight,
.split-form-horizen .full-height{
	height: 200px;
}

 .clear-splite .form-control{
	height: 34px;
	overflow-y: auto;
}


// Fluid container
//
// Utilizes the mixin meant for fixed width containers, but without any defined
// width for fluid, full width layouts.

.container-fluid {
  .container-fixed();
}


// Row
//
// Rows contain and clear the floats of your columns.

.row {
  .make-row();
}

	.row:before,
	.row:after {
		display: table;
		content: " ";
	}

	.row:after {
		clear: both;
	}

// Columns
//
// Common styles for small and large grid columns
.col,
.row [class*=col-] {
	display: inline-block;
	zoom: 1;
	letter-spacing: normal;
	word-spacing: normal;
	vertical-align: top;
	text-rendering: auto;
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
	float: left;
}

.make-grids();



// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
@media (max-width: 480px) {
	.xs, .sm, .md, .lg {
		width: 100%;
	}

	.xs-pull, .sm-pull, .md-pull, .lg-pull{
		right: 0;
	}
	.xs-push, .sm-push, .md-push, .lg-push{
		left:  0;
	}
	.xs-offset, .sm-offset, .md-offset, .lg-offset{
		margin-left: 0;
	}
	.xs-offset-right, .sm-offset-right, .md-offset-right, .lg-offset-right{
		margin-right: 0;
	}

	.split-form .form-control {
		height: 200px;
	}

	.split-form .highlight,
	.split-form .full-height{
		height: 250px;
	}

	.hidden-phone {
		display: none;
	}

	.visible-phone{
		display: block;
	}
}

@media (min-width: 768px) and (max-width: 979px) {
	.md, .lg {
		width: 100%;
	}

	.md-pull, .lg-pull{
		right: 0;
	}
	.md-push, .lg-push{
		left:  0;
	}
	.md-offset, .lg-offset{
		margin-left: 0;
	}
	.md-offset-right, .lg-offset-right{
		margin-right: 0;
	}

	.split-form .md .form-control,
	.split-form .lg .form-control {
		height: 200px;
	}

	.split-form .md .highlight,
	.split-form .md .full-height,
	.split-form .lg .highlight,
	.split-form .lg .full-height{
		height: 250px;
	}

	.hidden-tablet {
		display: none;
	}

	.visible-desktop {
		display: none;
	}
}
// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.

@media (min-width: @screen-md-min) {
	.lg {
		width: 100%;
	}
	.lg-pull{
		right: 0;
	}
	.lg-push{
		left:  0;
	}
	.lg-offset{
		margin-left: 0;
	}
	.lg-offset-right{
		margin-right: 0;
	}
	.split-form-horizen .lg .form-control {
		height: 200px;
	}

	.split-form-horizen .lg .highlight,
	.split-form-horizen .lg .full-height{
		height: 250px;
	}

	.visible-phone {
		display: none;
	}

	.visible-tablet {
		display: none;
	}

	.hidden-desktop {
		display: none;
	}
}


// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: @screen-lg-min) {
	.visible-phone {
		display: none;
	}

	.visible-tablet {
		display: none;
	}

	.hidden-desktop {
		display: none;
	}
}
